<div class="multi-swiper-container">
  <div class="content" [style.padding]="'0 '+localOptions.arrowPadding+'px'"
       [style.width.px]="(localOptions.width+localOptions.imagePadding*2)*localOptions.multiNum+localOptions.arrowPadding*2">
    <a class="arrow-left" href="javascript:void(0);" [style.width.px]="localOptions.arrowSize"
       [style.height.px]="localOptions.arrowSize"
       [ngStyle]="{backgroundImage: localOptions.leftArrow}"></a>
    <a class="arrow-right" href="javascript:void(0);" [style.width.px]="localOptions.arrowSize"
       [style.height.px]="localOptions.arrowSize"
       [ngStyle]="{backgroundImage: localOptions.rightArrow}"></a>
    <div class="swiper-container">
      <div class="swiper-wrapper" [style.left.px]="info.left"
           [style.width.px]="(localOptions.width+localOptions.imagePadding*2)*banners.length">
        <div class="swiper-slide grey-shadow"
             [style.margin]="'0 '+localOptions.imagePadding+'px'"
             [style.width.px]="localOptions.width" *ngFor="let banner of banners">
          <a  target="_blank" (click)="clickItem(banner)" >
            <div class="img-container" [style.width.px]="localOptions.width" [style.height.px]="localOptions.height">
              <img [src]="banner?.img" [style.width.px]="localOptions.width" [style.height.px]="localOptions.height"/>
            </div>
            <!--<div class="shuffer-line"></div>-->
            <div class="stars-info" [style.backgroundColor]="localOptions.textOnImgFilter"
                 [style.width.px]="localOptions.width" *ngIf="localOptions.textOnImg">
              <div class="name">{{banner?.title}}</div>
              <div class="intro">{{banner?.content}}</div>
              <!--<div class="icon-shuffer-live"></div>-->
              <!--<div class="number"><i></i>5102</div>-->
            </div>
            <div class="text-info" *ngIf="localOptions.textBelowImg">
              <div class="name">{{banner?.title}}</div>
              <div class="intro">{{banner?.content}}</div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
